<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Picker - Basic</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
    <style>
      .grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(250px, 1fr));
        grid-row-gap: 20px;
        grid-column-gap: 20px;
      }

      h2 {
        font-size: 12px;
        font-weight: normal;

        color: #6f7378;

        margin-top: 10px;
        margin-left: 5px;
      }

      @media screen and (max-width: 800px) {
        .grid {
          grid-template-columns: 1fr;
          padding: 0;
        }
      }

      ion-popover {
        --width: 300px;
      }

      ion-modal {
        --height: 250px;
      }
    </style>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Picker - Basic</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">
        <div class="grid">
          <div class="grid-item">
            <h2>Inline</h2>
            <ion-picker id="inline">
              <ion-picker-column id="first"></ion-picker-column>
              <ion-picker-column id="second"></ion-picker-column>
            </ion-picker>
          </div>
          <div class="grid-item">
            <h2>One Numeric Input</h2>
            <ion-picker>
              <ion-picker-column numeric-input="true" id="numeric-first"></ion-picker-column>
              <ion-picker-column id="numeric-second"></ion-picker-column>
            </ion-picker>
          </div>
          <div class="grid-item">
            <h2>Two Numeric Input</h2>
            <ion-picker>
              <ion-picker-column numeric-input="true" id="dual-numeric-first"></ion-picker-column>
              <ion-picker-column numeric-input="true" id="dual-numeric-second"></ion-picker-column>
            </ion-picker>
          </div>
          <div class="grid-item">
            <h2>Popover</h2>
            <button id="popover">Open Picker</button>
            <ion-popover trigger="popover">
              <ion-picker>
                <ion-picker-column id="popover-first"></ion-picker-column>
                <ion-picker-column id="popover-second"></ion-picker-column>
              </ion-picker>
            </ion-popover>
          </div>
          <div class="grid-item">
            <h2>Modal</h2>
            <button id="modal">Open Modal</button>
            <ion-modal trigger="modal">
              <ion-header>
                <ion-toolbar>
                  <ion-buttons slot="end">
                    <ion-button>Done</ion-button>
                  </ion-buttons>
                </ion-toolbar>
              </ion-header>
              <ion-content force-overscroll="false">
                <ion-picker>
                  <ion-picker-column id="modal-first"></ion-picker-column>
                  <ion-picker-column id="modal-second"></ion-picker-column>
                </ion-picker>
              </ion-content>
            </ion-modal>
          </div>
        </div>
      </ion-content>
    </ion-app>

    <script>
      const column = document.querySelector('ion-picker-column#numeric-first');
      column.addEventListener('ionChange', (ev) => {
        console.log('Column change', ev.detail);
      });
      const setPickerColumn = (selector, items, value) => {
        const column = document.querySelector(selector);

        items.forEach((item) => {
          const option = document.createElement('ion-picker-column-option');
          option.value = item.value;
          option.textContent = item.text;

          option.setAttribute('data-test-value', item.value);

          column.appendChild(option);
        });

        column.value = value;
      };

      const modal = document.querySelector('ion-modal');
      modal.breakpoints = [0, 1];
      modal.initialBreakpoint = 1;

      setPickerColumn(
        '#first',
        [
          { text: 'Minified', value: 'minified' },
          { text: 'Responsive', value: 'responsive' },
          { text: 'Full Stack', value: 'full-stack' },
          { text: 'Mobile First', value: 'mobile-first' },
          { text: 'Serverless', value: 'serverless' },
        ],
        'full-stack'
      );

      setPickerColumn(
        '#second',
        [
          { text: 'Tomato', value: 'tomato' },
          { text: 'Avocado', value: 'avocado' },
          { text: 'Onion', value: 'onion' },
          { text: 'Potato', value: 'potato' },
          { text: 'Artichoke', value: 'artichoke' },
        ],
        'onion'
      );

      let minutes = [];
      for (let i = 1; i <= 60; i++) {
        const text = i < 10 ? `0${i}` : `${i}`;
        minutes.push({
          text,
          value: i,
        });
      }
      setPickerColumn('#numeric-first', minutes, 3);

      setPickerColumn(
        '#numeric-second',
        [
          { text: 'Tomatoes', value: 'tomato' },
          { text: 'Avocados', value: 'avocado' },
          { text: 'Onions', value: 'onion' },
          { text: 'Potatoes', value: 'potato' },
          { text: 'Artichokes', value: 'artichoke' },
        ],
        'onion'
      );

      const columnDualNumericFirst = document.querySelector('ion-picker-column#dual-numeric-first');
      columnDualNumericFirst.addEventListener('ionChange', (ev) => {
        console.log('Column change', ev.detail);
      });
      setPickerColumn(
        '#dual-numeric-first',
        [
          { text: '12', value: 12 },
          { text: '01', value: 1 },
          { text: '02', value: 2 },
          { text: '03', value: 3 },
          { text: '04', value: 4 },
          { text: '05', value: 5 },
          { text: '06', value: 6 },
          { text: '07', value: 7 },
          { text: '08', value: 8 },
          { text: '09', value: 9 },
          { text: '10', value: 10 },
          { text: '11', value: 11 },
        ],
        3
      );
      const columnDualNumericSecond = document.querySelector('ion-picker-column#dual-numeric-second');
      columnDualNumericSecond.addEventListener('ionChange', (ev) => {
        console.log('Column change', ev.detail);
      });
      setPickerColumn('#dual-numeric-second', minutes, 3);

      setPickerColumn(
        '#popover-first',
        [
          { text: 'Minified', value: 'minified' },
          { text: 'Responsive', value: 'responsive' },
          { text: 'Full Stack', value: 'full-stack' },
          { text: 'Mobile First', value: 'mobile-first' },
          { text: 'Serverless', value: 'serverless' },
        ],
        'full-stack'
      );

      setPickerColumn(
        '#popover-second',
        [
          { text: 'Tomato', value: 'tomato' },
          { text: 'Avocado', value: 'avocado' },
          { text: 'Onion', value: 'onion' },
          { text: 'Potato', value: 'potato' },
          { text: 'Artichoke', value: 'artichoke' },
        ],
        'onion'
      );

      setPickerColumn(
        '#modal-first',
        [
          { text: 'Minified', value: 'minified' },
          { text: 'Responsive', value: 'responsive' },
          { text: 'Full Stack', value: 'full-stack' },
          { text: 'Mobile First', value: 'mobile-first' },
          { text: 'Serverless', value: 'serverless' },
        ],
        'full-stack'
      );

      setPickerColumn(
        '#modal-second',
        [
          { text: 'Tomato', value: 'tomato' },
          { text: 'Avocado', value: 'avocado' },
          { text: 'Onion', value: 'onion' },
          { text: 'Potato', value: 'potato' },
          { text: 'Artichoke', value: 'artichoke' },
        ],
        'onion'
      );
    </script>
  </body>
</html>
